<template>
  <a-carousel
    indicator-type="slider"
    show-arrow="hover"
    auto-play
    style="width: 100%; height: 90px; border-radius: 4px; overflow: hidden"
  >
    <a-carousel-item v-for="(image, idx) in images" :key="idx">
      <div>
        <a-link
          :href="image.jumpLink.replace('${new Date().getTime()}', '')"
          target="_blank"
          rel="noopener"
        >
          <img :src="image.imageUrl" style="width: 100%" alt="" />
        </a-link>
      </div>
    </a-carousel-item>
  </a-carousel>
</template>

<script setup lang="ts">
import {lists} from '@/apis/system/banner'
import type * as T from "@/apis/system/type";

const images = reactive<T.BannerDto[]>([])

// const images = [
//   {
//     src: `https://continew.top/qrcode-text.jpg?${new Date().getTime()}`,
//     url: 'https://continew.top/about/intro.html',
//   },
//   {
//     src: `https://continew.top/sponsor.jpg?${new Date().getTime()}`,
//     url: 'https://continew.top/sponsor.html',
//   },
// ]

// 获取banners
const onGetBanners = async () => {
    const res = await lists()
    Object.assign(images, res.data)
}

onMounted(() => {
  onGetBanners()
})


</script>
